<template>
	<div class="add-goods table-theme" v-if="goodsInfo">
		<head-back-title title="添加商品"></head-back-title>
		<el-card>
			<el-form :model="goodsInfo" :rules="goodsRules" ref="goodsInfo" label-width="120px">
				<p class="title" style="font-size: 20px;">商品信息</p>
				<div class="goods-info">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="商品名称:" prop="goods_name">
								<el-input v-model="goodsInfo.goods_name" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工厂货号:" prop="lining_sn">
								<el-input v-model="goodsInfo.lining_sn" placeholder="请输入工厂货号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="平台款号:" prop="goods_sn">
								<el-input v-model="goodsInfo.goods_sn" placeholder="请输入平台款号"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="出厂价格:" prop="factory_price">
								<el-input v-model="goodsInfo.factory_price" placeholder="请输入内容" type="number"><i slot="suffix">元</i></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="货期:" prop="send_id">
								<el-select v-model="goodsInfo.send_id" placeholder="请选择">
									<el-option v-for="(data,index) in sendList" :key="index" :label="data.send_name" :value="data.send_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="安装方式:" prop="install_id">
								<el-select v-model="goodsInfo.install_id" placeholder="请选择">
									<el-option value="1" label="整装"></el-option>
									<el-option value="2" label="组装"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="风格分类:" prop="style_id">
								<el-select v-model="goodsInfo.style_id" placeholder="请选择">
									<el-option v-for="item in StyleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="空间分类:" prop="space_id">
								<el-select v-model="goodsInfo.space_id" placeholder="请选择">
									<el-option v-for="item in SpaceList" :key="item.space_id" :label="item.space_name" :value="item.space_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="品类分类:" prop="class_id">
								<el-select v-model="goodsInfo.class_id" placeholder="请选择">
									<el-option v-for="item in ClassList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="材质:" prop="texture_id">
								<el-select v-model="goodsInfo.texture_id" placeholder="请选择">
									<el-option v-for="item in TextureList" :key="item.texture_id" :label="item.texture_name" :value="item.texture_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="填充物:" prop="filler_id">
								<el-select v-model="goodsInfo.filler_id" placeholder="请选择">
									<el-option value="1" label="高密度海绵"></el-option>
									<el-option value="2" label="公子棉"></el-option>
									<el-option value="3" label="乳胶"></el-option>
									<el-option value="4" label="羽绒"></el-option>
									<el-option value="5" label="弹簧包"></el-option>
									<el-option value="6" label="太空棉"></el-option>
									<el-option value="7" label="其他"></el-option>
									<el-option value="8" label="无"></el-option>
									<el-option value="9" label="海绵+羽绒"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工艺:" prop="craft_id">
								<el-select v-model="goodsInfo.craft_id" placeholder="请选择">
									<el-option value="1" label="手工雕刻工艺"></el-option>
									<el-option value="3" label="钢琴烤漆工艺"></el-option>
									<el-option value="4" label="复古铜钉工艺"></el-option>
									<el-option value="5" label="水晶拉扣工艺"></el-option>
									<el-option value="6" label="仿古做旧工艺"></el-option>
									<el-option value="7" label="皮拉扣工艺"></el-option>
									<el-option value="8" label="不锈钢拉丝工艺"></el-option>
									<el-option value="9" label="不锈钢镀金工艺"></el-option>
									<el-option value="10" label="喷金工艺"></el-option>
									<el-option value="11" label="描金工艺"></el-option>
									<el-option value="12" label="描银工艺"></el-option>
									<el-option value="13" label="拼花工艺"></el-option>
									<el-option value="14" label="间棉工艺"></el-option>
									<el-option value="15" label="其他"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="包装件数:" prop="pack_id">
								<el-select v-model="goodsInfo.pack_id" placeholder="请选择">
									<el-option v-for="(data,index) in packList" :key="index" :label="data.pack_name" :value="data.pack_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="包装体积:" prop="bulk">
								<el-input v-model="goodsInfo.bulk" placeholder="请输入包装体积"><i slot="suffix">m³</i></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="服务:" prop="save_id">
								<el-select v-model="goodsInfo.save_id" placeholder="请选择">
									<el-option v-for="(data,index) in serveList" :key="index" :label="data.serve_name" :value="data.serve_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="库存:" prop="number">
								<el-input v-model="goodsInfo.number" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品产地:" prop="lining_address">
								<el-input v-model="goodsInfo.lining_address" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="标签:" prop="">
								<el-input v-model="goodsInfo.label_id" placeholder="多个标签请用斜杠( / )隔开"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="物流:" prop="express_id">
								<el-select v-model="goodsInfo.express_id" placeholder="请选择">
									<el-option v-for="(data,index) in expressList" :key="index" :label="data.express_name" :value="data.express_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="物流费用:" prop="express_price">
								<el-input v-model="goodsInfo.express_price" placeholder="请输入内容" type="number"></el-input>
							</el-form-item>
						</el-col>
						
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="推荐商品:" prop="">
								<el-input v-model="goodsInfo.recommend_good" placeholder="请选择推荐商品编号...多个商品请用斜杠( / )隔开"></el-input>
								<span style="cursor: pointer;color: #34a1e0;" @click="openGoodsView">点这里快速选择商品</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="产品包含:" prop="contain">
								<el-input v-model="goodsInfo.contain" placeholder="请输入产品包含内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="商品简介:" prop="brief">
								<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsInfo.brief"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="add-model-view">
						<p class="title" style="font-size: 20px;">模型</p>
						<div class="add-model-form">
							<div class="upload-box" style="padding-left: 10px;margin-top: 20px;">
								<div class="model-upload">
									<div class="model-upload-btns">
										<el-upload ref="uploadModel" action="fakeaction" :show-file-list="false" :multiple="true"
											:http-request=" function(res) { return uploadModel(res); } " accept="*">
											<el-button type="primary" size="small">上传模型</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="reset(4)" 
											style="width:80px;margin-top:10px;background-color: #37c1d6;border-color:#37c1d6">重置</el-button>
									</div>
									<div class="model-upload-imgs">
										<div v-for="(data, index) in templateUrl" :key="index" class="vice_big_box">
											<el-image :src="require('@/assets/image/file.jpg')" fit="contain" v-if="data !== ''">
												<div slot="error" class="image-slot"></div>
											</el-image>
											<i class="model-del el-icon-error" @click="delInput('url',index)"></i>
										</div>
										<div class="vice_big_box" v-if="!templateUrl.length">
											<el-image  fit="contain" >
												<div slot="error" class="image-slot"></div>
											</el-image>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="add-sku-view">
						<p class="title" style="font-size: 20px;">商品SKU</p>
					
						<div class="add-sku-form">
							<el-form :model="CreateSkuForm" status-icon :rules="CreateSkuRules" ref="CreateSkuForm" label-width="100px">
								<div class="add-sku-form-item" style="margin-top: 20px; margin-bottom: 10px;">
									<el-form-item label="" prop="name_size">
										<el-input v-model="CreateSkuForm.name_size" placeholder="请输入规格名称如：尺寸"></el-input>
									</el-form-item>
								</div>
								<div class="add-sku-form-item">
									<el-form-item label="" prop="size">
										<div class="sku-input-view" v-for="(size, index) in sizeList" :key="index">
											<el-input v-model="size.value"></el-input>
											<i class="el-icon-error" v-show="index !=0" @click="delInput('size',index)"></i>
										</div>
									</el-form-item>
									<div class="add-sku-form-menu">
										<span @click="addInput(0)">+添加</span>
										<span @click="reset(0)">重置</span>
									</div>
								</div>
								<div class="add-sku-form-item" style="margin-top: 20px; margin-bottom: 10px;">
									<el-form-item label="" prop="name_color">
										<el-input v-model="CreateSkuForm.name_color" placeholder="请输入规格名称如：颜色"></el-input>
									</el-form-item>
								</div>
								<div class="add-sku-form-item">
									<el-form-item label="" prop="color">
										<div class="sku-input-view" v-for="(color, index) in colorList" :key="index">
											<el-input v-model="color.value"></el-input>
											<i class="el-icon-error" v-show="index !=0" @click="delInput('color',index)"></i>
										</div>
									</el-form-item>
									<div class="add-sku-form-menu">
										<span @click="addInput(1)">+添加</span>
										<span @click="reset(1)">重置</span>
									</div>
								</div>
								<el-form-item label="" class="upload-box" prop="color_img_vice_middle" style="padding-left: 10px;margin-top: 20px;">
									<div class="goods-img-upload">
										<!-- SKU图 -->
										<div class="goods-img-upload-btns">
											<el-upload ref="upload" :file-list="skuImagePreview" :limit="maxUpimage" action="fakeaction" :show-file-list="false"
											 :http-request=" function(res) { return upload(res, 0); } " accept="image/*">
												<el-button type="primary" size="small">上传图片</el-button>
											</el-upload>
											<el-button type="danger" size="small" @click="restImg('sku')">重置</el-button>
											<div class="el-upload__tip">
												<p style="color: red;">(可以传{{ colorList.length }}张图)</p>
												800*800像素
											</div> 
										</div> 
										<div class="goods-img-upload-imgs">
													<div v-for="(data, index) in colorList" :key="index" class="vice_big_box">
														<el-image :preview-src-list="skuImageList" :src="skuImageList[index]" fit="contain">
															<div slot="error" class="image-slot"></div>
														</el-image>
													</div>
											</div>
										</div>
								</el-form-item>
								<div class="add-sku-form-item" style="margin-top: 20px; margin-bottom: 10px;">
									<el-form-item label="" prop="name_lining">
										<el-input v-model="CreateSkuForm.name_lining" placeholder="请输入规格名称如：材质"></el-input>
									</el-form-item>
								</div>
								<div class="add-sku-form-item">
									<el-form-item label="" prop="lining">
										<div class="sku-input-view" v-for="(lining, index) in liningList" :key="index">
											<el-input v-model="lining.value"></el-input>
											<i class="el-icon-error" v-show="index !=0" @click="delInput('lining',index)"></i>
										</div>
					
									</el-form-item>
									<div class="add-sku-form-menu">
										<span @click="addInput(2)">+添加</span>
										<span @click="reset(2)">重置</span>
									</div>
								</div>
							</el-form>
						</div>
					
						<div class="add" style="display: flex;justify-content: center;padding: 20PX 0;">
							<el-button type="primary" @click="CreateSku('goodsInfo')">提交生成SKU</el-button>
						</div>
					</div>
					
					<el-table :data="skuLists" border class="factory-table" v-if="skuLists.length != 0">
						<el-table-column label="序号" align="center" prop="id" width="80"></el-table-column>
						<el-table-column label="工厂款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_lining_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="sku款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="skuLists[0].name_size" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.size" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="skuLists[0].name_lining" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.lining" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="skuLists[0].name_color" align="center" width="120">
							<template slot-scope="scope">
								<el-input v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<el-upload
                  class="avatar-uploader"
                  action="fakeaction"
                  :show-file-list="false"
                  :http-request=" function (res) { return uploadSkuImg(res, scope.$index); } "
                >
									<ImgPopover :src="scope.row.img"></ImgPopover>
                </el-upload>
							</template>
						</el-table-column>
						<el-table-column label="出厂价" align="center" width="90">
							<template slot-scope="scope">
								<el-input v-model="scope.row.factory_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="保险" align="center" width="100">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.is_insure" :active-value="1" :inactive-value="0"></el-switch>
							</template>
						</el-table-column>
						<!-- <el-table-column label="零售价" align="center" width="90">
							<template slot-scope="scope">
								<el-input v-model="scope.row.retail_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column> -->
						 <!-- <el-table-column label="运费险" align="center" prop="is_insure">
							<template slot-scope="scope">
								<el-select v-model="scope.row.is_insure" placeholder="请选择">
								<el-option v-for="item in insureList" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</template>
						</el-table-column> -->
						<el-table-column label="包件" align="center" width="70">
							<template slot-scope="scope">
								<!-- <el-input v-model="scope.row.pack" placeholder="请输入内容"></el-input> -->
								<el-select v-model="scope.row.sku_pack_id" placeholder="请选择">
									<el-option
										v-for="(data, index) in packList"
										:key="index"
										:label="data.pack_name"
										:value="data.pack_id"
									></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="体积" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.bulk" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="起售量" align="center" width="50">
							<template slot-scope="scope">
								<el-input v-model="scope.row.coefficient_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="库存" align="center" width="70">
							<template slot-scope="scope">
								<el-input v-model="scope.row.number" placeholder="请输入内容"></el-input>
							</template> </el-table-column>
						<el-table-column label="操作" align="center" width="80">
							<template slot-scope="scope">
								<el-button type="danger" size="mini" @click="delSku(scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="goods-image">
						<el-form :model="imageForm" status-icon :rules="imageRules" ref="imageForm" label-width="100px">
							<p class="title" style="font-size: 20px;margin-top: 20px;">商品图片</p>
							<div class="case_upload clearfix">
								<el-col :span="6">
									<el-form-item label="上传主图:" class="upload-box" prop="major_img_big">
										<div class="goods-img-upload">
											<div class="goods-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 1); } ">
													<el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<div class="el-upload__tip">800*800像素</div> </div> <div class="goods-img-upload-imgs">
														<el-image :src="imageForm.major_img_big">
															<div slot="error"></div>
														</el-image>
												</div>
											</div>
									</el-form-item>
								</el-col>
								<el-col :span="18">
									<el-form-item label="上传附图(最多4张):" class="upload-box" prop="vice_img_vice_middle">
										<div class="goods-img-upload">
											<div class="goods-img-upload-btns">
												<el-upload :file-list="vice_img_vice_preview" ref="upload" :limit="4" action="fakeaction" :show-file-list="false"
												 :http-request=" function(res) { return upload(res, 2); } " multiple accept="image/*">
													<el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<el-button type="danger" size="small" @click="restImg('vice')">重置</el-button>
												<div class="el-upload__tip">800*800像素</div> </div> <div class="goods-img-upload-imgs">
														<el-image v-if="!vice_img_vice_middle.length">
															<div slot="error"></div>
														</el-image>
														<div v-for="(data, index) in vice_img_vice_middle" :key="index" class="vice_big_box" v-else>
															<i class="el-icon-error" @click="delVice(index, 1)"></i>
															<el-image :preview-src-list="vice_img_vice_middle" :src="data" fit="contain"></el-image>
														</div>
												</div>
											</div>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="上传视频:" class="upload-box">
										<div class="goods-img-upload">
											<div class="goods-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return uploadVideo(res); } "
												 accept="video/mp4,avi">
													<el-button type="primary" size="small">上传视频</el-button>
												</el-upload>
												<el-button type="danger" size="small" @click="restImg('video')">重置</el-button>
												<div class="el-upload__tip">小于20MB</div>
											</div>
											<div class="goods-img-upload-imgs">
												<el-image v-show="!goodsInfo.video">
													<div slot="error"></div>
												</el-image>
												<div class="vice_big_box" style="width: 500px; margin-left: 25px;" v-show="goodsInfo.video">
													<video-player id="video" ref="videoPlayer" class="vjs-custom-skin" :playsinline="true" :options="playerOptions" />
												</div>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="视频封面图:" class="upload-box" prop="">
										<div class="goods-img-upload">
											<div class="goods-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 3,'cover'); } ">
													<el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<!-- <div class="el-upload__tip">小于500KB</div>  -->
												</div> <div class="goods-img-upload-imgs">
														<el-image :src="imageForm.cover_img">
															<div slot="error"></div>
														</el-image>
												</div>
											</div>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="上传实物图:" class="upload-box" prop="">
										<div class="goods-img-upload">
											<div class="goods-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" multiple :show-file-list="false" :http-request=" function(res) { return upload(res, 3,'entity'); } ">
													<el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<!-- <div class="el-upload__tip">小于500KB</div>  -->
											</div> 
											<div class="goods-img-upload-imgs">
												<el-image v-if="!imageForm.shot_img.length">
													<div slot="error"></div>
												</el-image>
												<div v-for="(data, index) in imageForm.shot_img" :key="index" class="vice_big_box" v-else>
													<i class="el-icon-error" @click="delVice(index, 2)"></i>
													<el-image :preview-src-list="imageForm.shot_img" :src="data" fit="contain"></el-image>
												</div>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="上传详情图:" class="upload-box" prop="info_img">
										<VueSortableImg @change="getInfoImg"></VueSortableImg>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item></el-form-item>
								</el-col>
							</div>
						</el-form>
					</div>
				</div>
			</el-form>
			<div class="add" style="display: flex;justify-content: center;padding: 20PX 0;">
				<el-button type="primary" @click="UploadProduct" v-if="!isSubmit">保存并上架</el-button>
				<el-button type="primary" v-else disabled>正在保存</el-button>
			</div>
		</el-card>
	</div>
</template>

<script>
	import {
		packList,
		serveList,
		sendList,
		expressList
	} from '@/assets/api/JSON'
	import recommend from '@/components/layer-dialog/good-recommend.vue';
	import md5 from 'md5';
	import ImgPopover from '@/components/ImgPopover';
	import VueSortableImg from '@/components/VueSortableImg';
	export default {
		components: {
			ImgPopover,
			recommend,
			VueSortableImg
		},
		data() {
			return {
				packList: packList,
				serveList: serveList,
				sendList: sendList,
				expressList: expressList,
				admin_id: localStorage.getItem('admin_id'),
				vice_img_vice_big: [], // 大副图
				vice_img_vice_middle: [], // 副图
				vice_img_vice_preview: [], // 副图预览
				vice_middle: [],
				vice_big: [],
				info_img: [], // 详情图
				info_img_preview: [], // 详情图预览
				skuImageList: [], // sku图
				skuImagePreview: [], // sku图
				goodsInfo: {
					factory_id: localStorage.getItem('factory_id'),
					goods_name: '',
					lining_sn: '',
					goods_sn: '',
					number: '999',
					factory_price: '',
					send_id: 1,
					install_id: '2',
					style_id: 1,
					space_id: 1,
					class_id: 1,
					texture_id: 1,
					filler_id: '7',
					craft_id: '15',
					pack_id: 1,
					bulk: '',
					save_id: 1,
					express_id: 3,
					express_price: '0',
					lining_address: '',
					recommend_good: '',
					brief: '',
					label_id: '',
					video: '',
					major_img_big: '',
					major_img_middle: '',
					major_img_thumb: '',
					major_img_small: '',
					vice_img_vice_big: '',
					vice_img_vice_middle: '',
					info_img: '',
					color_img_vice_thumb: '',
					color_img_vice_middle: '',
					color_img_vice_big: '',
					name_color: '',
					name_lining: '',
					name_size: '',
					upimg: '',
					contain:"",
					template_info:[]
				},
				goodsRules: {
					goods_name: [{
						required: true,
						message: '必填项不能为空'
					}],
					lining_sn: [{
						required: true,
						message: '必填项不能为空'
					}],
					goods_sn: [{
						required: true,
						message: '必填项不能为空'
					}],
					number: [{
						required: true,
						message: '必填项不能为空'
					}],
					factory_price: [{
						required: true,
						message: '必填项不能为空'
					}],
					send_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					install_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					style_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					space_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					class_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					texture_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					filler_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					craft_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					pack_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					bulk: [{
						required: true,
						message: '必填项不能为空'
					}],
					save_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					express_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					express_price: [{
						required: true,
						message: '必填项不能为空'
					}],
					lining_address: [{
						required: true,
						message: '必填项不能为空'
					}],
					brief: [{
						required: true,
						message: '必填项不能为空'
					}],
					label_id: [{
						required: true,
						message: '必填项不能为空'
					}]
				},
				imageForm: {
					info_img: '',
					major_img_big: '',
					shot_img:[],
					cover_img: '',
					vice_img_vice_middle: ''
				},
				imageRules: {
					info_img: [{
						required: true,
						message: '必填项不能为空'
					}],
					major_img_big: [{
						required: true,
						message: '必填项不能为空'
					}],
					vice_img_vice_middle: [{
						required: true,
						message: '必填项不能为空'
					}]
				},
				skuLists: [],
				StyleList: [], // 风格
				SpaceList: [], // 空间
				TextureList: [], // 材质
				ClassList: [], // 品类
				CreateSkuForm: {
					size: '',
					lining: '',
					color: '',
					name_size: '尺寸',
					name_lining: '材质',
					name_color: '颜色',
					color_img_vice_middle: ''
				},
				CreateSkuRules: {
					size: [{
						required: true,
						message: '请输入内容'
					}],
					lining: [{
						required: true,
						message: '请输入内容'
					}],
					color: [{
						required: true,
						message: '请输入内容'
					}],
					color_img_vice_middle: [{
						required: true,
						message: '请上传图片'
					}]
				},
				sizeList: [{
					value: ''
				}],
				colorList: [{
					value: ''
				}],
				liningList: [{
					value: ''
				}],
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: 'video/mp4',
						src: ''
					}],
					hls: true,
					poster: '', // 你的封面地址
					width: '500px', // 播放器宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试'
				},
				maxUpimage: 1,
				DataCompare: {
					skuLists: []
				}, // 数据比对
				isSubmit:false,
				templateUrl:[],
			};
		},
		watch: {
			'colorList.length': function(val) {
				this.maxUpimage = this.colorList.length;
				console.log(this.colorList.length);
			},
			skuLists: {
				handler: function(newVal, oldVal) {
					for (let i in newVal) {
						console.log('旧', this.DataCompare.skuLists[i].factory_price);
						console.log('新', newVal[i].factory_price);
						if (localStorage.getItem('factory_type') == 1) {
							if (this.DataCompare.skuLists[i].factory_price != newVal[i].factory_price) {
								newVal[i].retail_price = Math.ceil(newVal[i].factory_price * 2.5);
								newVal[i].self_price = Math.ceil(newVal[i].factory_price * 1.25);
								this.DataCompare.skuLists[i].factory_price = newVal[i].factory_price
							}
						} else {
							if (this.DataCompare.skuLists[i].factory_price != newVal[i].factory_price) {
								newVal[i].retail_price = Math.ceil(newVal[i].factory_price * 2.16);
								newVal[i].self_price = Math.ceil(newVal[i].factory_price * 1.08);
								this.DataCompare.skuLists[i].factory_price = newVal[i].factory_price
							}
						}
					}
				},
				deep: true
			},
			sizeList: {
				handler: function(newVal) {
					this.CreateSkuForm.size = newVal[0].value
				},
				deep: true
			},
			colorList: {
				handler: function(newVal) {
					this.CreateSkuForm.color = newVal[0].value
				},
				deep: true
			},
			liningList: {
				handler: function(newVal) {
					this.CreateSkuForm.lining = newVal[0].value
				},
				deep: true
			},
		},
		methods: {
			getInfoImg(info_img) {
				this.info_img = info_img
				this.imageForm.info_img = info_img
			},
			init() {},
			getClassify() {
				// 风格
				this.$http(this.$ApiList.StyleList).then(res => {
					this.StyleList = res.datas;
				});
				// 空间
				this.$http(this.$ApiList.SpaceList).then(res => {
					this.SpaceList = res.datas;
				});
				// 材质
				this.$http(this.$ApiList.TextureList).then(res => {
					this.TextureList = res.datas;
				});
				let data = {
					store_id: localStorage.getItem('store_id')
				};
				// 品类
				this.$http(this.$ApiList.ClassList, data).then(res => {
					this.ClassList = res.datas;
				});
			},
			// 图片上传 type 0上传sku图 1 2 3
			upload(params, type,formType) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt500KB = file.size / 1024 <= 500;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				// if (!isLt500KB) {
				// 	this.$message.error('图片不能大于500K!');
				// 	return;
				// }
				const form = new FormData();
				form.append('file[]', file);
				switch (Number(type)) {
					case 0:
						this.$http(this.$ApiList.UpSkuImg, form).then(res => {
							this.skuImageList.push(res.datas[0]);
							this.skuImagePreview.push({
								image: res.datas[0]
							});
							this.CreateSkuForm.color_img_vice_middle = this.skuImageList;
						})
						break;
					case 1:
						this.$http(this.$ApiList.mainUpload, form).then(res => {
							this.goodsInfo.major_img_big = res.datas[0].major_img_big;
							this.goodsInfo.major_img_middle = res.datas[0].major_img_middle;
							this.goodsInfo.major_img_thumb = res.datas[0].major_img_thumb;
							this.goodsInfo.major_img_small = res.datas[0].major_img_small;

							this.imageForm.major_img_big = res.datas[0].major_img_big;
						})
						break;
					case 2:
						this.$http(this.$ApiList.viceUpload, form).then(res => {
							this.vice_img_vice_middle.push(res.datas[0].vice_img_middle);
							this.vice_img_vice_big.push(res.datas[0].vice_img_big);
							this.vice_img_vice_preview.push({
								image: res.datas[0].vice_img_middle
							});
						})
						break;
					case 3:
						if(formType == 'public'){
							this.$http(this.$ApiList.publicUpload,form).then(res=>{
								this.imageForm.activity_image = res.datas[0]
							})
						}else if( formType == 'entity' ){
							this.$http(this.$ApiList.publicUpload,form).then(res=>{
								this.imageForm.shot_img.push(res.datas[0])
							})
						}else if( formType == 'cover'){
							this.$http(this.$ApiList.publicUpload,form).then(res=>{
								this.imageForm.cover_img = res.datas[0]
							})
						}
						break;
				}
			},
			// 上传模型
			uploadModel(params){
				const file = params.file;
				const form = new FormData();
				form.append('file[]', file);
				this.$http(this.$ApiList.UpTemplate,form).then(res=>{
					this.templateUrl.push(res.datas)
				})
			},
			// 视频上传
			uploadVideo(params) {
				const file = params.file,
					isLt20MB = file.size / 1024 / 1024 < 20,	
					videoType = new Array("avi","mov","mp4"),
					isVideoType = videoType.includes(file.type.substring(file.type.lastIndexOf('/')+1));
				if(!isVideoType){
					this.$message.error('只能上传视频格式！');
					return;
				}
				if (!isLt20MB) {
					this.$message.error('视频不能大于20MB！');
					return;
				}
				const form = new FormData();
				form.append('file[]', file);
				this.$http(this.$ApiList.UpVideo, form).then(res => {
					this.goodsInfo.video = res.datas;
					this.$nextTick(() => {
						this.playerOptions.sources[0].src = res.datas;
					});
				})
			},
			// 添加 0 尺寸 1颜色 2材质
			addInput(type) {
				let item = {
					value: ''
				};
				if (type == 0) {
					this.sizeList.push(item);
				} else if (type == 1) {
					this.colorList.push(item);
				} else if (type == 2) {
					this.liningList.push(item);
				}
			},
			delInput(type, index) {
				switch (type) {
					case 'size':
						this.sizeList.splice(index, 1);
						break;
					case 'color':
						this.colorList.splice(index, 1);
						break;
					case 'lining':
						this.liningList.splice(index, 1);
						break;
					case 'url':
						this.templateUrl.splice(index,1);
						break
					default:
						return;
				}
			},
			// 重置 0 尺寸 1颜色 2材质
			reset(type) {
				let item = [{
					value: ''
				}];
				if (type == 0) {
					this.sizeList = item;
				} else if (type == 1) {
					this.colorList = item;
				} else if (type == 2) {
					this.liningList = item;
				} else if (type == 4) {
					this.templateUrl = []
				}
			},
			CreateSku(formName) {
				if (this.colorList.length != this.skuImageList.length) {
					this.$layer.msg('有多少个颜色就要传多少张sku图');
					return
				}
				let data = {
					factory_id: localStorage.getItem('factory_id'),
					name_size: this.CreateSkuForm.name_size,
					name_color: this.CreateSkuForm.name_color,
					name_lining: this.CreateSkuForm.name_lining,
					factory_price: this.goodsInfo.factory_price,
					goods_sn: this.goodsInfo.goods_sn,
					number: this.goodsInfo.number,
					sku_sn: this.goodsInfo.lining_sn,
					bulk: this.goodsInfo.bulk,
					pack_id: this.goodsInfo.pack_id,
					class_id:this.goodsInfo.class_id
				};
				this.sizeList.forEach((item, i) => {
					if (item.value != '') {
						let num = i + 1;
						let size = 'size_name_' + num;
						data[size] = item.value;
						this.CreateSkuForm.size = item.value;
					}
				});
				this.colorList.forEach((item, i) => {
					if (item.value != '') {
						let num = i + 1;
						let color = 'color_name_' + num;
						data[color] = item.value;
						this.CreateSkuForm.color = item.value;
					}
				});
				this.liningList.forEach((item, i) => {
					if (item.value != '') {
						let num = i + 1;
						let lining = 'lining_name_' + num;
						data[lining] = item.value;
						this.CreateSkuForm.lining = item.value;
					}
				});
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$refs['CreateSkuForm'].validate(valid => {
							if (valid) {
								this.skuImageList.forEach((item, i) => {
									if (item.value != '') {
										let num = i + 1;
										let skuImage = 'color_img_vice_middle_' + num;
										data[skuImage] = item;
									}
								});
								data.lining_sn = this.goodsInfo.lining_sn;
								this.$http(this.$ApiList.CreateSku, data).then(res => {
									this.skuLists = res.datas.map(item=>{
										item.pack = Number(item.pack)
										return item
									});
									this.DataCompare.skuLists = JSON.parse(JSON.stringify(res.datas));
									let is_unique = []
									this.skuLists.forEach(item => {
										if(item.is_unique){
											is_unique.push(item.sku_sn)
										}
									})
									if(is_unique.length){
										this.$confirm('<p>以下sku款号重复，请修改后提交</p>'+is_unique.join('<br />'), '提示', {
											confirmButtonText: '确定',
											showCancelButton: false,
											dangerouslyUseHTMLString: true,
											type: 'error'
										});
									}
								})
							} else {
								this.$layer.msg('请检查SKU信息是否完整');
							}
						});
					} else {
						this.$layer.msg('请检查商品信息是否完整');
					}
				});
			},
			// 上传商品
			UploadProduct() {	
				
				if (this.skuLists.length == 0) {
					this.$layer.msg('至少要有一个sku');
					return;
				}
				this.goodsInfo.name_lining = this.CreateSkuForm.name_lining;
				this.goodsInfo.name_color = this.CreateSkuForm.name_color;
				this.goodsInfo.name_size = this.CreateSkuForm.name_size;
				let info_img = [];
				this.info_img.forEach(item => {
					info_img.push(item);
				});
				this.goodsInfo.info_img = info_img.join(',');
				this.goodsInfo.vice_img_vice_big = this.vice_img_vice_big.join(',');
				this.goodsInfo.vice_img_vice_middle = this.vice_img_vice_middle.join(',');

				this.imageForm.info_img = info_img.join(',');
				this.imageForm.vice_img_vice_middle = this.vice_img_vice_middle.join(',');

				this.goodsInfo.upimg = JSON.stringify(this.skuLists);

				this.goodsInfo.shot_img = this.imageForm.shot_img.length?this.imageForm.shot_img.join(','):'';
				this.goodsInfo.cover_img = this.imageForm.cover_img;
				// 计算模型
				this.goodsInfo.template_url = JSON.stringify(this.templateUrl)
				this.$refs['goodsInfo'].validate(valid => {
					if (valid) {
						this.$refs['imageForm'].validate(valid => {
							if (valid) {
								this.isSubmit = true;
								this.$http(this.$ApiList.FactoryAddGoods, this.goodsInfo).then(res => {
									this.isSubmit = false;
									if(res.code==200){
										this.$store.dispatch('tagsView/delView', this.$route).then(({
											visitedViews
										}) => {});
										this.$router.push({
											path: '/factory_operate'
										});
									}else if(res.code==203){
										this.$confirm(res.error, '提示', {
											confirmButtonText: '确定',
											showCancelButton: false,
											type: 'error'
										});
									}
								}).catch(() => {
									this.isSubmit = false;
								})
								setTimeout(() => {
									this.isSubmit = false
								},1500);
							} else {
								this.$layer.msg('请检查主图、副图、详情图是否完整');
							}
						});
					} else {
						this.$layer.msg('请检查商品信息是否完整');
					}
				});
			},
			delSku(index) {
				console.log(index);
				this.skuLists.splice(index, 1);
			},
			// 删除附图
			delVice(index, type) {
				this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						if (type == 1) {
							this.vice_img_vice_middle.splice(index, 1);
							this.vice_img_vice_big.splice(index, 1);
							this.vice_img_vice_preview.splice(index, 1);
						}else{
							this.imageForm.shot_img.splice(index,1)
						}
					})
					.catch(() => {});
			},
			// 重置图片
			restImg(type) {
				switch (type) {
					case 'sku':
						this.skuImageList = [];
						this.skuImagePreview = [];
						break;
					case 'vice':
						this.vice_img_vice_middle = [];
						this.vice_img_vice_big = [];
						this.vice_img_vice_preview = [];
						break;
					case 'video':
						this.goodsInfo.video = '';
						break;
				}
			},
			openGoodsView() {
				this.$layer.iframe({
					title: '选择商品',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: recommend, //传递的组件对象
						parent: this, //当前的vue对象
						data: {

						} //props
					}
				});
			},
			setGoodsId(ids) {
				this.goodsInfo.recommend_good = ids.replace(/,/g, "/")
			},
			uploadSkuImg(res,index){
				const file = res.file,
        isJPGPNG = file.type === "image/jpeg" || "image/png";
        let isLt500KB = file.size / 1024 <= 2048;
        // if(type == 4){
        //   isLt500KB = file.size / 1024 <= 512;
        // }else{
        //   isLt500KB = file.size / 1024 <= 2048;
        // }
				if (!isJPGPNG) {
					this.$message.error("只能上传图片格式png、jpg!");
					return;
				}
				// if (!isLt500KB) {
				//   this.$message.error("图片不能大于500K!");
				//   return;
				// }
				const form = new FormData();
				form.append("file[]", file);
				this.$http(this.$ApiList.UpSkuImg, form).then((res) => {
					this.skuLists[index].img = res.datas[0];
				})
			}
		},
		created() {
			this.init();
			this.getClassify();
		},
		mounted(){
			this.$nextTick(()=>{
				this.$refs.uploadModel.$children[0].$refs.input.webkitdirectory = true
			})
		}
	};
</script>

<style lang="scss">
	.add-goods .main-image .el-upload {
		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		border-radius: 6px;
		box-sizing: border-box;
		width: 148px;
		height: 148px;
		cursor: pointer;
		line-height: 146px;
		vertical-align: top;
	}

	.add-goods .main-image .el-upload .el-icon-plus {
		font-size: 28px;
		color: #8c939d;
	}

	.add-goods .detail-image .el-upload-list--picture .el-upload-list__item {
		height: auto;
	}

	.add-goods .detail-image .el-upload-list__item img {
		width: 100%;
		height: 100%;
	}

	.add-sku-form .el-form-item,
	.add-model-form .el-form-item {
		margin-bottom: 0 !important;
	}

	.add-sku-form .el-form-item__content ,
	.add-model-form .el-form-item__content {
		margin-left: 0 !important;
	}

	.add-sku-form-item ,
	.add-model-form-item {
		display: flex;
	
		.el-form-item__content {
			display: flex;
			flex-wrap: wrap;
		}
	
		.sku-input-view,
		.model-input-view {
			&:first-child {
				margin-right: 30px;
			}
	
			.el-icon-error {
				margin-left: 10px;
				font-size: 20px;
				color: #ef3030;
				cursor: pointer;
			}
		}
	
	}

	.add-sku-form-menu,
	.add-model-form-menu {
		min-width: 100px;
	}

	.add-sku-form-menu span,
	.add-model-form-menu span {
		display: inline-block;
		margin-left: 10px;
		line-height: 60px;
		color: #00a0e9;
		cursor: pointer;
	}

	.add-sku-form .el-input,
	.add-model-form .el-input {
		width: 200px;
		margin-left: 10px;
		margin-top: 10px;
	}

	.add-goods .detail-image .el-upload-list--picture .el-upload-list__item {
		height: auto;
		width: 950px;
	}

	.add-goods .detail-image .el-upload-list__item img {
		width: 900px;
		height: 100%;
	}

	.add-goods .el-form-item__content {
		max-width: 845px;
	}

	.add-goods {
		.el-select {
			width: 100%;
		}

		.last {
			margin-bottom: 0;
		}

		.upload-drag {
			.el-upload {
				vertical-align: top;
			}

			.el-upload__tip {
				line-height: normal;
			}
		}

		.case_upload {
			display: flex;
			flex-wrap: wrap;

			.el-col {}
		}

		.el-select {
			display: block;
		}

		.upload-box {
			padding-left: 40px;

			.goods-img-upload,
			.model-upload {
				display: flex;

				.goods-img-upload-imgs, 
				.model-upload-imgs {
					flex: 1;
					align-items: flex-start;
					.el-image {
						position: relative;
						width: 140px;
						height: 140px;
						border: solid 1px #e5e5e5;
						margin-left: 25px;
						vertical-align: top;
					}
					.model-del{
						position: absolute;
						top: 0;
						right: 0;
						font-size: 30px;
						color: #ef3030;
					}
				}

				.goods-img-upload-imgs-info {
					width: 100%;
					max-width: 660px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					min-height: 390px;

					.goods-img-upload-imgs-info-box {
						position: relative;

						.el-icon-error {
							position: absolute;
							font-size: 20px;
							color: #ef3030;
							right: 5px;
							top: 5px;
							z-index: 1;
							background-color: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					.el-image {
						width: 100%;
						vertical-align: top;
					}
				}

				.vice_big_box {
					position: relative;
					display: inline-block;
					vertical-align: top;
					margin-bottom: 20px;

					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
			}

			.el-upload__tip {
				width: 80px;
				text-align: center;
			}

			.el-form-item__label {
				float: none;
			}

			.el-form-item__content {
				margin-left: 0 !important;

				.el-button--danger {
					width: 80px;
					background-color: #37c1d6;
					border-color: #37c1d6;
				}
			}
		}
	}

	.add-goods .el-input__inner {
		padding: 0 10px;
	}
</style>
